<template>
<view>
<!-- pages/shebao/shebao.wxml -->
<view style="background-color: #ffffff">
  <view class="main-box">
    <view class="select-box">
      <text class="mian-text">缴费城市</text>
      <text class="select-text" style="margin-right:30rpx;">深圳</text>
    </view>
    <picker @change="bindRegChange" :value="regindex" :range="registerArray">
      <view class="select-box">
        <text class="mian-text">户口选择</text>
        <view class="icon-box">
          <text class="select-text">{{registerArray[regindex]}}</text>
          <image src="/static/images/sys/right.png" class="img"></image>
        </view>
      </view>
    </picker>
    <picker @change="bindLevChange" :value="levindex" :range="levelArray" :disabled="pickSel">
      <view class="select-box">
        <text class="mian-text">医保档次</text>
        <view class="icon-box">
          <text class="select-text">{{levelArray[levindex]}}</text>
          <image src="/static/images/sys/right.png" class="img"></image>
        </view>
      </view>
    </picker>
  </view>
  <view class="base-box">
    <view class="select-box">
      <view class="tips">
        <text class="mian-text">缴费基数</text>
        <image src="/static/images/sys/tips@2x.png" class="tips-img-1" @tap="showSing"></image>
        <image v-if="showTips" src="/static/images/tools/tipsImg@2x.png" class="tips-img-2"></image>
      </view>
      <input type="digit" class="input" :value="numBase" @input="inputBase" :disabled="disabled" placeholder="请输入您的缴费基数">
    </view>
    <view class="min-box">
      <text class="mian-text">最低基数</text>
      <switch :checked="switchChecked" @change="switchChange"></switch>
    </view>
  </view>
</view>
<view class="computed" @tap="computed">开始计算</view>
<!-- <collection collectionData="{{collectionData}}" scroll="{{scroll}}" onopenCollection="openCollection" oncloseCollection="closeCollection"></collection> -->
</view>
</template>

<script>
// /pages/shebao/shebao.js
var choseCity = require("../../../../utils/formula.js");
const utils = require("../../../../utils/util.js");
let toggleCollection = true;

export default {
  data() {
    return {
      registerArray: ["深户", "非深户"],
      levelArray: ["一档", "二档", "三档"],
      regindex: 0,
      levindex: 0,
      switchChecked: false,
      disabled: false,
      pickSel: false,
      showTips: false,
      scroll: false,
      register: this.register,
      level: this.level,
      basePayment: this.numBase,
      url: '../result/result?computeData=' + JSON.stringify(computeData),
      title: '请补全信息',
      icon: 'none',
      numBase: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // utils.colleation(this, "社保缴费计算");
    toggleCollection = true; // 默认户口值

    this.registerArray.map((item, index) => {
      if (index == this.regindex) {
        this.setData({
          register: item
        });

        if (this.register == "深户") {
          this.setData({
            pickSel: true
          });
        } else {
          this.setData({
            pickSel: false
          });
        }
      }
    }); // 默认医保档次

    this.levelArray.map((item, index) => {
      if (index == this.levindex) {
        this.setData({
          level: item
        });
      }
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    // 户口选择
    bindRegChange: function (e) {
      this.setData({
        regindex: e.detail.value
      });
      this.registerArray.map((item, index) => {
        if (index == this.regindex) {
          this.setData({
            register: item
          });

          if (this.register == "深户") {
            this.setData({
              pickSel: true,
              levindex: 0
            });
          } else {
            this.setData({
              pickSel: false
            });
          }
        }
      });
    },
    // 医保档次
    bindLevChange: function (e) {
      this.setData({
        levindex: e.detail.value
      });
      this.levelArray.map((item, index) => {
        if (index == this.levindex) {
          this.setData({
            level: item
          });
        }
      });
    },
    // 最低基数
    inputBase: function (e) {
      let numBase = e.detail.value;
      this.setData({
        numBase
      });
    },
    // 最低基数按钮
    switchChange: function (e) {
      let baseflag = e.detail.value;

      if (baseflag) {
        this.setData({
          numBase: 2200,
          disabled: true
        });
      } else {
        this.setData({
          disabled: false
        });
      }
    },

    showSing() {
      this.setData({
        showTips: true
      });
      setTimeout(() => {
        this.setData({
          showTips: false
        });
      }, 1500);
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    },

    computed() {
      console.log("占位：函数 computed 未声明");
    }

  }
};
</script>
<style>
/* pages/shebao/shebao.wxss */

page {
    background-color: #f5f5f5
  }
  
  .main-box {
    margin: 0 30rpx;
  }
  
  .select-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid#f5f5f5;
    padding: 25rpx 0
  }
  
  .mian-text {
    font-size: 30rpx;
    font-weight: 500;
    color: rgba(35, 35, 35, 1);
    opacity: 1;
    font-family: PingFang SC;
  }
  
  .tips {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .tips-img-1 {
    width: 26rpx;
    height: 26rpx;
    margin-left: 14rpx
  }
  
  .tips-img-2 {
    position: absolute;
    left: 71%;
    top: 90%;
    width: 300rpx;
    height: 76rpx;
  }
  
  .select-text {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(149, 149, 149, 1);
    opacity: 1;
  }
  
  .icon-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .img {
    width: 12rpx;
    height: 22rpx;
    margin-left: 20rpx;
  }
  
  .base-box {
    border-top: 20rpx solid#f5f5f5;
    padding: 0 30rpx;
  }
  
  .input {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(149, 149, 149, 1);
    opacity: 1;
    text-align: right;
    align-items: right;
    margin-right: 30rpx;
  }
  
  .min-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 0
  }
  
  .computed {
    margin: 120rpx 40rpx;
    border-radius: 10rpx;
    text-align: center;
    background: linear-gradient(255deg, rgba(255, 170, 0, 1) 0%, rgba(255, 102, 0, 1) 100%);
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    padding: 20rpx 0
  }
  
  /* background-color:#FF7F2A; */
</style>